<template>
	<view class="agent-pages-order" :style="{background:!configInfo.plugAuth.agentport?pageColor:''}">
		<load-more :noMore="true" :loading="true" v-if="!isLoad"> </load-more>
		<block v-if="isLoad">
			<block v-if="!configInfo.plugAuth.agentport">
				<abnor type="NOT_AUTH" :isCenter="true"></abnor>
			</block>
			<block v-if="configInfo.plugAuth.agentport">
				<abnor @confirm="$util.toLoginOut(3)"
					:tip="[{text: options.agent ? `您还不是${$t('action.agentName')}哦～`:'您还不是管理员哦~'}]"
					:button="[{ text: '退出登录', type: 'confirm' }]" btnSize="" :isCenter="true" v-if="detail.id == -1">
				</abnor>
				<block v-else>
					<view class="rel" style="padding:0 20rpx" v-if="isLoad">
						<block
							v-if="(!options.agent && !detail.is_agent) || ((options.agent || detail.is_agent) && detail.agent_coach_auth)">
							<view class="fill-base mt-md radius-20"
								v-if="detail.node.includes('shopOrder') || detail.node.includes('shopRefund')">
								<view class="pd-lg f-paragraph text-bold" style="color:#434343">订单管理</view>
								<view class="tool-list flex-warp">
									<view @tap.stop="toJump('shopOrder',index)"
										class="tool-item flex-center flex-column" v-for="(item,index) in shopOrder"
										:key="index"
										v-show="(item.text!='首单退款' && detail.node.includes('shopOrder')) || (item.text=='首单退款' && detail.node.includes('shopRefund'))">
										<view class="item-img flex-center radius rel" :style="{background:rgbaColor}">
											<i class="iconfont" :class="item.icon" :style="{color:primaryColor}"></i>
											<view class="abs dot-unread-number flex-center"
												:style="{width: item.number>99 ? '44rpx': item.number > 9 ? '34rpx' :'',right: item.number>99 ? '-32rpx': item.number > 9 ? '-22rpx' :'-12rpx'}"
												v-if="item.number > 0">
												{{item.number < 100 ? item.number : '99+'}}
											</view>
										</view>
										<view class="f-caption">{{item.text}}</view>
									</view>
								</view>
							</view>

							<view class="fill-base mt-md radius-20"
								v-if="detail.node.includes('shopBellOrder') || detail.node.includes('shopBellRefund')">
								<view class="pd-lg f-paragraph text-bold" style="color:#434343">加钟管理</view>
								<view class="tool-list flex-warp">
									<view @tap.stop="toJump('shopBellOrder',index)"
										class="tool-item flex-center flex-column" v-for="(item,index) in shopBellOrder"
										:key="index"
										v-show="(item.text!='加钟退款' && detail.node.includes('shopBellOrder')) || (item.text=='加钟退款' && detail.node.includes('shopBellRefund'))">
										<view class="item-img flex-center radius rel" :style="{background:rgbaColor}">
											<image mode="heightFix" class="icon-img" :src="item.icon"></image>
											<view class="abs dot-unread-number flex-center"
												:style="{width: item.number>99 ? '44rpx': item.number > 9 ? '34rpx' :'',right: item.number>99 ? '-32rpx': item.number > 9 ? '-22rpx' :'-12rpx'}"
												v-if="item.number > 0">
												{{item.number < 100 ? item.number : '99+'}}
											</view>
										</view>
										<view class="f-caption">{{item.text}}</view>
									</view>
								</view>
							</view>

							<view class="fill-base mt-md radius-20" v-if="detail.node.includes('shopRefuseOrder')">
								<view class="pd-lg f-paragraph text-bold" style="color:#434343">拒单管理</view>
								<view class="tool-list flex-warp">
									<view @tap.stop="toJump('shopRefuseOrder',index)"
										class="tool-item flex-center flex-column"
										v-for="(item,index) in shopRefuseOrder" :key="index">
										<view class="item-img flex-center radius rel" :style="{background:rgbaColor}">
											<i class="iconfont" :class="item.icon" :style="{color:primaryColor}"></i>
											<view class="abs dot-unread-number flex-center"
												:style="{width: item.number>99 ? '44rpx': item.number > 9 ? '34rpx' :'',right: item.number>99 ? '-32rpx': item.number > 9 ? '-22rpx' :'-12rpx'}"
												v-if="item.number > 0">
												{{item.number < 100 ? item.number : '99+'}}
											</view>
										</view>
										<view class="f-caption">{{item.text}}</view>
									</view>
								</view>
							</view>

							<abnor type="NOT_AUTH" :isCenter="true"
								v-if="detail.node.length==0 || (detail.node.length==1 && detail.node.includes('MarketCoupHxrecord'))">
							</abnor>
						</block>
						<block v-else>
							<abnor type="NOT_AUTH" :isCenter="true"></abnor>
						</block>
					</view>
				</block>

				<view class="space-lg"></view>
				<view :style="{height: `${configInfo.tabbarHeight}px`}"></view>
				<longbingbing-tabbar tabType="agentTabBar" :cur="2"></longbingbing-tabbar>
			</block>
		</block>
		<!-- #ifdef MP-WEIXIN -->
		<user-privacy ref="user_privacy" :show="false"></user-privacy>
		<!-- #endif -->

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
				options: {},
				rgbaColor: '',
				shopOrder: [{
					icon: 'icondaifuwu4',
					text: '待接单',
					url: '/agent/pages/order/list?tab=2',
					key: 2,
					number: 0
				}, {
					icon: 'iconjishijiedan1',
					text: '已接单',
					url: '/agent/pages/order/list?tab=3',
					key: 3,
					number: 0
				}, {
					icon: 'iconjishichufa1',
					text: '已出发',
					url: '/agent/pages/order/list?tab=4',
					key: 4,
					number: 0
				}, {
					icon: 'iconjishidaoda1',
					text: '已到达',
					url: '/agent/pages/order/list?tab=5',
					key: 5,
					number: 0
				}, {
					icon: 'iconanmo2',
					text: '服务中',
					url: '/agent/pages/order/list?tab=6',
					key: 6,
					number: 0
				}, {
					icon: 'iconyiwancheng',
					text: '已完成',
					url: '/agent/pages/order/list?tab=7'
				}, {
					icon: 'iconshenqingzhong',
					text: '首单退款',
					url: '/agent/pages/refund/list?tab=1',
					key: 1,
				}],
				shopBellOrder: [{
					icon: 'https://api.huixuananmm.com/admin/anmo/menu/daifuwu.png',
					text: '待接单',
					url: '/agent/pages/order/list?bell=1&tab=2',
					key: 2,
					number: 0
				}, {
					icon: 'https://api.huixuananmm.com/admin/anmo/menu/jiedan.png',
					text: '已接单',
					url: '/agent/pages/order/list?bell=1&tab=3',
					key: 3,
					number: 0
				}, {
					icon: 'https://api.huixuananmm.com/admin/anmo/menu/fuwuzhong.png',
					text: '服务中',
					url: '/agent/pages/order/list?bell=1&tab=4',
					key: 6,
					number: 0
				}, {
					icon: 'https://api.huixuananmm.com/admin/anmo/menu/wancheng.png',
					text: '已完成',
					url: '/agent/pages/order/list?bell=1&tab=5',
				}, {
					icon: 'https://api.huixuananmm.com/admin/anmo/menu/shenqingzhong.png',
					text: '加钟退款',
					url: '/agent/pages/refund/list?bell=1&tab=1',
					key: 1,
				}],
				shopRefuseOrder: [{
					icon: 'icondaizhuandan',
					text: '待转单',
					url: '/agent/pages/order/list?tab=8',
					key: 8,
					number: 0
				}]
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			haveOperItem: state => state.order.haveOperItem,
			agentportType: state => state.user.agentportType,
			detail: state => state.user.agentInfo,
		}),
		async onLoad(options) {
			let {
				agentportType: agent = 0
			} = this
			options.agent = agent * 1
			this.options = options
			this.initIndex()
		},
		async onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			await this.initRefresh()
			uni.stopPullDownRefresh()
		},
		methods: {
			...mapActions(['getConfigInfo', 'getAgentInfo', ]),
			...mapMutations(['updateUserItem', 'updateOrderItem']),
			async initIndex(refresh = false) {
				if (!this.configInfo.id || refresh || !this.userInfo.id) {
					await this.getConfigInfo()
				}
				this.rgbaColor = this.$util.rgbColor(this.primaryColor, 0.15)
				this.$util.setNavigationBarColor({
					bg: this.primaryColor,
					color: '#ffffff'
				})

				await this.getAgentInfo()

				let {
					id,
					refund_count = [],
					add_refund_count = [],
					order_count = [],
					add_count = [],
					refuse_order = []
				} = this.detail
				if (id && id != -1) {
					this.shopOrder.map(item => {
						if (item.key) {
							item.number = item.text == '首单退款' ? refund_count[item.key] : order_count[item.key]
						}
					})
					this.shopBellOrder.map(item => {
						if (item.key) {
							item.number = item.text == '加钟退款' ? add_refund_count[item.key] : add_count[item.key]
						}
					})
					this.shopRefuseOrder.map(item => {
						if (item.key) {
							item.number = refuse_order[item.key]
						}
					})
				}
				this.isLoad = true
				this.$util.hideAll()

				// #ifdef MP-WEIXIN
				let privacyCheck = this.$refs.user_privacy.check()
				if (privacyCheck) {
					this.$refs.user_privacy.open()
					return
				}
				// #endif

				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
			initRefresh() {
				this.initIndex(true)
			},
			toJump(key, index) {
				let {
					id = 0,
						url,
						text
				} = this[key][index]
				let {
					agent
				} = this.options
				let joinKey = url.includes('?') ? '&' : '?'
				url += `${joinKey}agent=${agent}`
				this.$util.goUrl({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.agent-pages-order {

		.tool-list {
			.tool-item {
				width: 25%;
				padding-bottom: 40rpx;

				.iconfont {
					font-size: 42rpx;
				}

				.item-img {
					width: 60rpx;
					height: 60rpx;

					.iconfont {
						font-size: 36rpx;
					}

					.icon-img {
						height: 32rpx;
					}
				}

				.f-caption {
					color: #0F0D0E;
					margin-top: 15rpx;
				}
			}
		}

		.dot-unread-number {
			top: 0;
			right: 0;
			width: 24rpx;
			height: 24rpx;
			line-height: 24rpx;
			text-align: center;
			color: #fff;
			font-size: 18rpx;
			border-radius: 24rpx;
			background-color: #F1381F;
		}
	}
</style>